import React from 'react'
import {DragWrapper} from './DragWrapper'
import {ConnectionNodeWidget} from './nodes/connection/ConnectionNodeWidget'
import {DiamondNodeWidget} from './nodes/diamond/DiamondNodeWidget'
import {ProcessNodeWidget} from "./nodes/process/ProcessNodeWidget"
import {StartNodeWidget} from "./nodes/start/StartNodeWidget"
import {EndNodeWidget} from "./nodes/end/EndNodeWidget"

class Node extends React.Component {
    renderNode () {
        const {type, color, size} = this.props

        if (type === 'connection') {
            return <ConnectionNodeWidget id="sideBarConnectionNode" node={{name: 'Connection Node'}} color={color} displayOnly/>
        }
        else if (type === 'diamond') {
            return <DiamondNodeWidget id="sideBarDiamondNode" node={{name: 'Condition'}} color={color} size={size} displayOnly/>
        }

        else if(type === 'process') {
            return <ProcessNodeWidget id="sideBarProcessNode" node={{name: 'Process'}} color={color} size={size} displayOnly/>
        }
        else if(type === 'start') {
            return <StartNodeWidget id="sideBarStartNode" node={{name: 'Start'}} color={color} size={size} displayOnly/>
        }
        else if(type === 'end') {
            return <EndNodeWidget id="sideBarEndNode" node={{name: 'End'}} color={color} size={size} displayOnly/>
        }
        console.warn('Unknown node type')
        return null
    }

    render () {
        const {type, color} = this.props

        return (
            <DragWrapper type={type} color={color} style={{display: 'inline-block'}}>
                {this.renderNode()}
            </DragWrapper>
        )
    }
}

export class NodesPanel extends React.Component {
    render () {
        return (
            <div className='nodes-panel'>
                <div className='node-wrapper'>
                    <Node type='start' size='50'/>
                </div>
                <div className='node-wrapper'>
                    <Node type='diamond' size='100'/>
                </div>
                <div className='node-wrapper'>
                    <Node type='process' size='100'/>
                </div>
                <div className='node-wrapper'>
                    <Node type='end' size='50'/>
                </div>
            </div>
        )
    }
}
